<template>
  <el-dialog :title="title" :visible.sync="dialogVisible" :before-close="handleCancel" center width="440px">
    <div class="from-group">
      <label class="from-label">现有类型名称：</label>
      <div class="from-content">{{ model.typeName }}</div>
    </div>
    <div class="from-title">类型当前应用场景与关联工单</div>
    <div class="from-group" v-for="(item, index) in pageData" :key="index">
      <label class="from-label">{{ item.paramValue }}：</label>
      <div class="from-content">{{ item.num }}条</div>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="handleCancel" size="small">关 闭</el-button>
    </div>
  </el-dialog>
</template>

<script>
import Vue from 'vue'
import { getRelationList } from '../js/api'
// import pick from 'lodash.pick'
import { USER_INFO } from '@/views/children/workOrder/js/constants'
export default {
  name: 'RoleModal',
  data () {
    return {
      tenantNo: Vue.ls.get(USER_INFO).tenantNo,
      title: '当前关联工单',
      isAdd: false,
      disabled: false,
      dialogVisible: false,
      labelWidth: '100px',
      editForm: {
        roleNo: ''
      },
      model: {},
      rules: {},
      typeName: '',
      pageData: {}
    }
  },
  computed: {},
  filters: {},
  mounted () {},
  methods: {
    // 编辑
    edit (record) {
      this.dialogVisible = true
      this.model = Object.assign({}, record)
      console.log(this.model)
      this.$nextTick(() => {
        this.getTenantRoleList()
      })
    },
    async getTenantRoleList () {
      let res = await getRelationList(this.model.typeNo)
      console.log(res)
      if (res.code === 0) {
        if (res.data) {
          this.typeName = res.data.typeName
          this.pageData = res.data.itemList
          console.log(res.data)
        } else {
          this.typeName = '无'
        }
      } else {
        this.$message.error(res.msg)
      }
    },
    handleCancel () {
      this.dialogVisible = false
      this.typeName = ''
      this.pageData = []
    }
  }
}
</script>

<style lang="scss" scoped>
.dialog-footer {
  text-align: right;
}
.el-dialog {
  .el-input,
  .el-select {
    width: 100%;
  }
}
/deep/ .el-dialog__body {
  padding-bottom: 0;
}

.from-group {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  height: 40px;
  line-height: 40px;
}
.from-title {
  height: 40px;
  line-height: 40px;
}
</style>
